<script setup>
import DefaultProfile from '../assets/user.png'
import {ref, computed, onMounted} from "vue";
import {useRoute, useRouter} from "vue-router";
import {DeleteResume, GetResume} from "../api/resume.js";
const resume = ref('');
const route = useRoute();
const router = useRouter();
const id = computed((() => route.query.id))
import html2pdf from 'html2pdf.js'
import html2canvas from 'html2canvas'

const getResume = async () => {
  const res = await GetResume(id.value)
  if(res.data.code  === 200) {
    resume.value = res.data.data;
  }
}

const deleteResume = async () => {
  const res = await DeleteResume(id.value)
  if(res.data.code === 200) {
    router.push({
      name: 'home'
    })
  }
}

const toResume = ()=>{
  router.push({
    name: 'add-resume',
    query: {
      id: resume.value.id
    }
  })
}

const resumePage = ref(null)
const downloadImage = async () => {
  const element = document.getElementById('resumePage')
  const canvas = await html2canvas(element)
  document.getElementById('result').appendChild(canvas)
}

const downloadImage2 = async () => {
  const element = document.getElementById('resumePage')
  const options = {
    filename:'resume.pdf',
    image: {type:'png', quality: 1},
    html2canvas: {scale:2, useCORS: true,logging: true},
    jsPDF: {unit: 'px', format:[1200,1621], orientation: 'portrait'}
  }
  html2pdf().from(element).set(options).save();
}

onMounted(() => {
  getResume()
})
</script>

<template>
  <div>
    <div class="w-[1200px] py-5 m-auto text-2xl font-bold flex">
      {{resume.title}}
      <div class="ml-auto">
        <el-button @click="toResume" icon="Edit" class="ml-auto" circle/>
        <el-button   @click="downloadImage" circle icon="Download"></el-button>
        <el-popconfirm @confirm="deleteResume" title="确认删除">
          <template #reference>
            <el-button type="danger" icon="Delete" class="ml" circle/>
          </template>
        </el-popconfirm>
      </div>
    </div>

    <div ref="resumePage" id="resumePage" class="w-[1200px] m-auto bg-white mt-5 flex">
      <div class="w-1/4 bg-gray-700 flex flex-col h-[1641px] pt-10">
        <img draggable="false" crossorigin="anonymous" :src="resume?.avatar?.length > 0 ? resume?.avatar : DefaultProfile" alt="" class="w-[120px] h-[120px] rounded-full border-4 mx-auto">
        <div class="flex flex-col items-center text-white">
          <div class="mt-2 text-xl font-bold">{{resume.name}}</div>
          <div class="text-gray-400">全栈工程师</div>
        </div>
        <div class="w-[90%] mx-auto mt-[50px]">
          <div class="border-b flex">
            <div class="bg-white px-2">联系方式</div>
          </div>
          <div>
            <div class="flex text-white items-center mt-2">
              <fai icon="envelope"></fai>
              <div class="ml-2">{{resume?.email}}</div>
            </div>

            <div class="flex text-white items-center mt-2">
              <fai icon="mobile"></fai>
              <div class="ml-2">{{resume?.phone}}</div>
            </div>

            <div class="flex text-white items-center mt-2">
              <fai icon="globe"></fai>
              <div class="ml-2">{{resume?.website}}</div>
            </div>

            <div class="flex text-white items-center mt-2">
              <fai icon="message"></fai>
              <div class="ml-2">{{resume?.wechat}}</div>
            </div>

          </div>
        </div>
      </div>
      <div class="flex-1 flex flex-col items-start p-5">
        <div class="w-full border-b border-b-black flex">
          <div class="text-2xl font-bold mt-2 text-gray-400 px-4 py-1">自我介绍</div>
        </div>
        <div class="flex flex-col items-start py-5">
          <div class="mt-2">{{resume.description}}</div>
        </div>
        <div class="w-full border-b border-b-black flex">
          <div class="text-2xl font-bold mt-2 text-gray-400 px-4 py-1">工作经历</div>
        </div>
      </div>
    </div>
    <div id="result"></div>
  </div>
</template>

<style scoped>

</style>